<template>
  <div>
    <!-- node-key="webid" -->
    <div class="bigbox">
      <div class="left">
        <div class="leftList">
          <div class="fatherinp">
            <el-tree
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              show-checkbox
              :node-key="id"
              class="filter-tree"
              :data="treedatalist"
              :props="defaultProps"
              @check="handleCheckChange"
              :default-expanded-keys="checkedListNode"
              ref="tree"
              check-on-click-node
              :check-strictly="falg1"
            >
              <span class="usertype1" slot-scope="{ data }">
                <i v-show="data.icon" :class="data.icon"></i>
                <span v-if="data.overallUserName" style="padding-left: 4px"
                  >{{ data.overallDepartmentName }}-{{ data.overallRealName }}-{{ data.overallUserName }}</span
                >
                <span v-else style="padding-left: 4px">{{ data.name }}</span>
              </span>
            </el-tree>
            <div></div>
          </div>
        </div>
      </div>
      <div class="center">
        <div class="soncenter">
          <div>
            <el-button size="mini" type="primary" @click="rightHandler" icon="el-icon-arrow-right"></el-button>
          </div>
          <br />
          <br />
          <div>
            <el-button size="mini" type="primary" @click="leftHandler" icon="el-icon-arrow-left"></el-button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="">
          <div class="title checkedList">已选列表</div>
          <div class="checkedListtwo">
            <div v-show="checkedList && checkedList.length > 0">
              <div class="" v-for="item in checkedList" :key="item.overallId">
                <el-checkbox :checked="true" @change="clearRow($event, item)"
                  >{{ item.overallOrganizeName }}-{{ item.overallDepartmentName }}-{{ item.overallRealName }}-{{
                    item.overallUserName
                  }}</el-checkbox
                >
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { arrayInFilter } from '@/utils/tools/funtctionAPI.js'
export default {
  props: {
    id: {
      type: String,
      default: 'sysOrganizeUserId'
    },
    treedatalist: {
      type: Array,
      default: () => []
    },
    arrt: {
      type: Object,
      required: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    checkedListNode: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {},
  data() {
    return {
      defaultProps: {
        label: 'name'
      },
      checkedList: [],
      input3: '',
      falg1: false,
      checked: false,
      themeColor: '',
      textarea: ''
    }
  },
  created() {
    if (window.localStorage.getItem('themeColor')) {
      this.themeColor = `#${window.localStorage.getItem('themeColor')}`
    } else {
      this.themeColor = '#6b9eff'
    }
  },

  mounted() {},
  methods: {
    handleCheckChange(node, checkedObj) {
      this.checkedList = checkedObj.checkedNodes.filter((e) => e.overallUserID)
      this.$emit('savePersonHandle', this.checkedList)
    },
    leftHandler() {
      this.checkedList = []
      this.$refs['tree'].setCheckedKeys([])
      this.$emit('savePersonHandle', this.checkedList)
    },
    leftitemHandler() {},
    rightHandler() {
      // let { participateWay } = this.arrt;
      let list = this.$refs['tree'].getCheckedNodes(true, false)
      if (list.length == 0) {
        this.$notify.warning('请选择要添加的人员')
        return
      }

      this.checkedList = arrayInFilter(list, (o) => o.usertype === 2)

      this.$emit('savePersonHandle', this.checkedList)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    clearRow(data, item) {
      if (!data) {
        let id = ''
        if (this.id == 'overallId') {
          if (item.overallId !== undefined) {
            id = item.overallId
          } else {
            id = item.overallId
          }
          let arr = this.checkedList.filter((item) => item.overallId !== id)

          // this.$set(this.data,'checkedList',arr)
          this.checkedList = arr
        } else {
          if (item.userId !== undefined) {
            id = item.userId
          } else {
            id = item.overallUserID
          }
          this.checkedList = this.checkedList.filter((item) => {
            if (item.overallUserID !== undefined && item.overallUserID !== id) {
              item.id = item.overallUserID
              return item
            } else if (item.userId !== undefined && item.userId !== id) {
              item.id = item.userId
              return item
            }
          })
        }

        this.$refs['tree'].setCheckedNodes(this.checkedList)
        this.$emit('savePersonHandle', this.checkedList)
      }
    },

    submitListHandler() {
      this.$emit('savePersonHandle', this.checkedList)
    },
    updatelisthandler(list) {
      if (list && list.length > 0) {
        this.$refs['tree'].setCheckedKeys([...list])
        this.$nextTick(() => {
          this.checkedList = this.$refs['tree'].getCheckedNodes(true, true)
        })
      } else {
        this.$refs['tree'].setCheckedKeys([])
        this.checkedList = []
      }
    },
    clearhandler() {
      this.checkedList = []
      this.$refs['tree'].setCheckedKeys([])
    },
    setTreeChecked(list) {
      this.$refs['tree'].setCheckedKeys([...list])
    },
    getCheckedKeys() {
      // console.log(
      //   this.$refs.tree.getCheckedNodes(true, false),
      //   "-----------getCheckedNodes"
      // );
      // console.log(
      //   this.$refs.tree.getCheckedKeys(),
      //   "-----------getCheckedKeys"
      // );
    }
  },
  watch: {
    input3(newval) {
      this.$refs['tree'].filter(newval)
    }
  }
  // filters: {
  //   nodeType(val) {
  //     let arr = [
  //       { val: 0, name: "单人处理" },
  //       { val: 1, name: "多人处理" },
  //       { val: 2, name: "多人串行" },
  //       { val: 3, name: "多人并行" },
  //     ];
  //     for (let item of arr) {
  //       if (item.val === val) {
  //         return item.name;
  //       }
  //     }
  //     return "操作者选择";
  //   },
  // },
}
</script>
<style lang="less" scoped>
.bigbox {
  display: flex;
  margin: 0 auto;
  justify-content: center;
  background-color: #fff !important;
  height: 40vh;
  ::v-deep.el-tree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
    display: inline-block !important;
  }
  // ::v-deep.el-tree .el-tree-node .el-checkbox .el-checkbox__inner {
  //   display: none !important;
  // }
}
// .usertype1{
//   display: block !important;
// }
// .usertype2{
//   display: none !important;
// }
.left,
.right {
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-right: -1px;
  width: 98%;
  height: 100%;
  overflow-y: auto;
  /* margin: -1px; */
  /* background-color: skyblue; */
}
.center {
  box-sizing: border-box;
  border: 1px solid #ccc;
  margin-right: -1px;
  width: 14%;
  height: 100%;
  min-height: 502px;
}
.soncenter {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
}
.right {
  min-height: 502px;
}
.center {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
::v-deep .el-dialog__body {
  padding-top: 0;
}
::v-deep.el-icon-arrow-left,
.el-icon-arrow-right {
  color: #fff;
}
.leftList {
  width: 100%;
  box-sizing: border-box;
  min-height: 500px;
  padding-right: 2px;
}
.search {
  margin-top: 1px;
  margin-left: 1px;
}
::v-deep.input-with-select {
  height: 35px;

  z-index: 1;
}
::v-deep.el-input-group__append,
.el-input-group__prepend {
  padding: 0 10px;
}
::v-deep.el-input__inner {
  height: 33px;
}
.fatherinp {
  height: 35px;
  width: 100%;
}

.positionLfet,
.positionRight {
  width: 56px;
  height: 40px;
  background-color: #6b9eff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  border-radius: 12px;
}
.checkedList {
  border-bottom: 1px solid #ccc;
  color: #6b9eff;
  height: 32px;
  line-height: 36px;
  font-size: 14px;
}
.checkedListtwo {
  height: 467px;
  overflow: auto;
}
.checkedItem {
  text-align: left;
  padding-left: 10px;
}

.icon {
  float: right;
  line-height: 38px;
  margin-right: 10px;
}
// .bigboxtwo {
//   margin-top: 10px;
// }
.submit {
  text-align: center;
  margin: 0 auto;
}
::v-deep.el-tree {
  height: 100% !important;
  width: 100% !important;
}
.title {
  text-indent: 2em;
}
</style>
